<%--
  Created by IntelliJ IDEA.
  User: yudejie2020
  Date: 2022/7/1
  Time: 14:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基本资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
<%--    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/css/public.css" media="all">--%>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
<%--    <script src="${pageContext.request.contextPath}/lib/lay-config.js" charset="utf-8"></script>--%>
<%--    <style>--%>
<%--        .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}--%>
<%--    </style>--%>
</head>
<body>
<div class="layuimini-container">
        <div class="layuimini-main">

        <div class="layui-form layuimini-form" id="abc">
            <div class="layui-form-item" >
                <label class="layui-form-label required">用户ID</label>
                <div class="layui-input-block">
                    <input type="text" name="userid" lay-verify="required"   value="${userinfo.userid}" class="layui-input">

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <input type="hidden" name="avatar" id="avatar" value="${userinfo.avatar}">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" style="width: 100px;height: 80px">
                    <SPAN id="demoText" style="color: #ff0000"></SPAN>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <%--进度条--%>
                    <div style="width: 95px;">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                    <button type="button" class="layui-btn" id="test1">·
                        <i class="layui-icon">&#xe67c;</i>更改头像
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">管理账号</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" lay-reqtext="管理账号不能为空" placeholder="请输入管理账号"  value="${userinfo.username}" class="layui-input">
                    <tip>填写自己管理账号的名称。</tip>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="0" title="男" checked="">
                    <input type="radio" name="sex" value="1" title="女">
                    <%--      <input type="text" name="sex" required  lay-verify="required"  autocomplete="off" class="layui-input">--%>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">手机</label>
                <div class="layui-input-block">
                    <input type="text" name="phonenumber" lay-verify="required|phone" lay-reqtext="请输入正确的手机号" placeholder="请输入手机号"  value="${userinfo.phonenumber}" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="email" name="email"  placeholder="请输入邮箱" lay-verify="required|email" lay-reqtext="邮箱格式错误" value="${userinfo.email}" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门编号</label>
                <div class="layui-input-block">
                    <select name="deptid" id="selectdetpid"></select>
                    <%--      <input type="text" name="deptid" required  lay-verify="required"  autocomplete="off" class="layui-input">--%>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <input name="remark" class="layui-input" value="${userinfo.remark}" placeholder="请输入备注信息"></input>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">修改人</label>
                <div class="layui-input-block">
                    <input type="text" name="update_by" class="layui-input"  value="${userinfo.username}"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form','upload','jquery','element'], function () {
        var form = layui.form,
            layer = layui.layer,
            $=layui.$,
            data=layui.data,
            element=layui.element,
            upload=layui.upload;

        //填充部门下拉框deptidSelect
        $.ajax({
            url:"${pageContext.request.contextPath}/userInfo/selectDept.do",
            type:"GET",
            dataType:"JSON",
            success:function (ret) {
                if(ret.code==0){
                    //<option value="0">写作</option>
                    var htmlStr="";
                    for (let i = 0; i < ret.data.length; i++) {
                        htmlStr+="<option value="+ret.data[i].dept_id+">"+ret.data[i].dept_id+":"+ret.data[i].dept_name+"</option>"
                    }
                    console.log(data,ret.data)
                    $("#selectdetpid").html(htmlStr);
                    //重新渲染表单
                    layui.use('form',function () {
                        var form=  layui.form;
                        form.render('select');
                    })
                }
            }
        })

        //执行实例 上传图片
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            , type: "post"
            , url: '${pageContext.request.contextPath}/userInfo/upload.do' //上传接口
            , accept: 'images'//只允许上传图片
            , acceptMime: 'image/*'//只显示图片文件
            /*,auto: false//禁用自动上传
            ,bindAction: '#addSub'*/
            , before: function (obj) {
                element.progress('demo', '0%'); //进度条复位
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                console.log(res)
                //如果上传失败
                if (res.code == 0) {
                    let src = res.data.src;
                    $("#avatar").val(src);
                    $("#demoText").html(res.msg)
                    /*$('#demo1').attr('src', src);*/
                } else {
                    $("#demoText").html(res.msg)
                    return layer.msg('上传失败');
                }
                //上传完毕回调
            }
            , error: function () {
                //请求异常回调
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
         //   var index = layer.alert(JSON.stringify(data.field));
                //填充部门下拉框deptidSelect
                $.ajax({
                    url:"${pageContext.request.contextPath}/userInfo/updateInfo.do",
                    type:"POST",
                    dataType:"JSON",
                    data:data.field,
                    success:function (ret) {
                        if (ret.code==0){
                            layer.alert("修改成功")

                        }

                    }



                            })}
        );



    });


</script>
</body>
</html>
